import {Component, ComponentProps, VueComponent, Mut, Computed} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInputGroup,NInputGroupLabel,NInput,NButton, NSelect, NCheckbox} from "naive-ui";
import BpmnModeler from '../../../BpmnModeler';
import styles from './index.module.scss';

interface IProps {
  bpmnModeler: BpmnModeler,
}
@Component()
export default class MultiInstPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {},
  }

  public static tabKey = "MultiInstPanel"
  public static tabName = "多实例"

  @Mut() private state = {
    // true:顺序多实例，false:并行多实例
    multi_isSequential: 'NONE',
    // 集合
    multi_collection: '',
    // 基数
    multi_loopCardinality: '',
    // 元素变量
    multi_elementVariable: '',
    // 完成条件
    multi_completionCondition: '',
  }

  @Computed() get enable(){ return this.state.multi_isSequential==='true'||this.state.multi_isSequential==='false';}

  private setConfigValues = (config:any)=>{
    this.props.bpmnModeler.selectedCell.updateData(config);
  }

  private getConfigValues = ()=>{
    const { selectedCell } = this.props.bpmnModeler;
    this.state.multi_isSequential = selectedCell.data?.multi_isSequential || 'NONE';
    this.state.multi_collection = selectedCell.data?.multi_collection || '';
    this.state.multi_loopCardinality = selectedCell.data?.multi_loopCardinality || '';
    this.state.multi_elementVariable = selectedCell.data?.multi_elementVariable || '';
    this.state.multi_completionCondition = selectedCell.data?.multi_completionCondition || '';
  }

  private updateIsSequential=(value:string)=>{
    this.state.multi_isSequential = value;
    this.setConfigValues({ multi_isSequential: this.state.multi_isSequential });
  }

  private updateCollection=(value:string)=>{
    this.state.multi_collection = value;
    this.setConfigValues({ multi_collection: this.state.multi_collection });
  }

  private updateLoopCardinality = (value:string)=>{
    this.state.multi_loopCardinality = value;
    this.setConfigValues({ multi_loopCardinality: this.state.multi_loopCardinality });
  }

  private updateElementVariable=(value:string)=>{
    this.state.multi_elementVariable = value;
    this.setConfigValues({ multi_elementVariable: this.state.multi_elementVariable });
  }

  private updateCompletionCondition=(value:string)=>{
    this.state.multi_completionCondition = value;
    this.setConfigValues({ multi_completionCondition: this.state.multi_completionCondition });
  }

  render(){
    this.getConfigValues();
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="多实例"><NSelect options={[{value:'NONE',label:'无'},{value:'true',label:'顺序多实例'},{value:'false',label:'并行多实例'}]} value={this.state.multi_isSequential} onUpdateValue={this.updateIsSequential} /></NFormItemGi>
          { this.enable && <NFormItemGi label="集合"><NInput value={this.state.multi_collection} onUpdateValue={this.updateCollection}/></NFormItemGi> }
          { this.enable && <NFormItemGi label="基数"><NInput value={this.state.multi_loopCardinality} onUpdateValue={this.updateLoopCardinality}/></NFormItemGi> }
          { this.enable && <NFormItemGi label="元素变量"><NInput value={this.state.multi_elementVariable} onUpdateValue={this.updateElementVariable}/></NFormItemGi> }
          { this.enable && <NFormItemGi label="完成条件"><NInput value={this.state.multi_completionCondition} onUpdateValue={this.updateCompletionCondition}/></NFormItemGi> }
        </NGrid>
      </NForm>
    )
  }
}